<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
<div id="app">
	<smart-item :data="data" :img='img' :video='video' :text='text'></smart-item>
	<button @click="change('img')">切换为图片为组件</button>
	<button @click="change('video')">切换为视频为组件</button>
	<button @click="change('text')">切换为文本组件</button>
</div>	
<script>
	var imgItem = {
		props : ['data','img'],
		render : function(h){
			var self = this;
			console.log(self.img)
			return h('div',[
				h('p','这是一个图片组件'),
				h('img',{
					attrs : {
						src : self.data.url,
					}
				})
			]);
		}
	};
	var videoItem = {
		props : ['data','video'],
		render : function(h){
			var self = this;
			return h('div',[
				h('p','这是一个视频组件'),
				h('video',{
					attrs : {
						src: self.data.url,
              			controls: 'controls',
              			autoplay: 'autoplay'
					}
				})
			]);
		}
	}
	var textItem = {
		props : ['data','text'],
		render : function(h){
			var self = this;
			return h('div',[
				h('p','这是一段文本'),
				h('span',self.data.text),	
			])
		}
	};
	Vue.component('smart-item', {
      functional: true,
      render: function(createElement, context) {
        console.log(context)
        function getComponent() {
          var data = context.props.data;
          if (data.type === 'img') return imgItem;
          if (data.type === 'video') return videoItem;
          return textItem;
        }
        return createElement(
          getComponent(),
          {
            props: {
              data: context.props.data
            }
          },
          context.children
        )
      },
      props: {
        data: {
          type: Object,
          required: true
        }
      }
    });
    var vm = new Vue({
    	el : '#app',
    	data : {
    		data : {},
    		img : '这是一个图片组件',
    		video : '这是一个视频组件',
    		text : '这是一段文本',
    	},
    	methods : {
    		change : function(type){
    			if(type==='img'){
    				this.data = {
    					type : 'img',
    					url : 'https://raw.githubusercontent.com/iview/iview/master/assets/logo.png'
    				}
    			}
    			else if(type==='video'){
    				this.data = {
    					type : 'video',
    					url : 'http://vjs.zencdn.net/v/oceans.mp4'
    				}
    			}
    			else if(type==='text') {
    				this.data = {
    					type : 'text',
    					content : '这是一段文本'
    				}
    			}
    		}
    	},
    	created : function(){
    		this.change('img');
    	}
    })
</script>
</body>
</html>